<template>
	<div class="container w-1/2 pt-12 px-8 bg-light-200">
		<div class="text-center text-lg py-4">Please input the Reservation Information</div>
		<ReservationCreate
			class="w-3/4 m-auto border rounded p-6"
			@submit="run"
			:loading="loading"
		></ReservationCreate>
	</div>
</template>

<script setup lang="ts">
import { book } from '@/apis/reservation';
import { BookReservationForm } from '@/types/reservation';
import { message } from 'ant-design-vue';
import { useRequest, useTimeout } from 'vue-hooks-plus';

const router = useRouter();
const { loading, run } = useRequest((data: BookReservationForm) => book(data), {
	manual: true,
	onSuccess: () => {
		message.success('Reservations had been add Successfully');
		useTimeout(() => {
			router.push({
				name: 'restful-list',
			});
		}, 2000);
	},
});
</script>

<style scoped></style>
